{% extends "base.html" %}

{% block title %}任务日志{% endblock %}

{% block content %}

    <div class="container mt-4">
        <h3 class="mb-4">任务执行日志</h3>
        
        <div class="card">
        
            <div class="card-body">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>日志ID</th>
                            <th>任务ID</th>
                            <th>开始时间</th>
                            <th>结束时间</th>
                            <th>文件数</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="logsTable">
                        <!-- Logs will be populated here -->
                    </tbody>
                </table>
                
                <nav aria-label="Page navigation" class="mt-4">
                    <ul class="pagination justify-content-center">
                        <li class="page-item">
                            <a class="page-link" href="#" id="prevPage">上一页</a>
                        </li>
                        <li class="page-item">
                            <span class="page-link" id="currentPage">1</span>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="#" id="nextPage">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="card-footer">
                <button id="clearLogsBtn" class="btn btn-lg btn-danger">清空日志</button>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
    <script>
        // Setup clear logs button
        document.getElementById('clearLogsBtn').addEventListener('click', clearLogs);
        // Load logs when page loads
        document.addEventListener('DOMContentLoaded', loadLogs);

        let currentPage = 1;
        const pageSize = 5;
        
        function loadLogs() {
            fetch(`/api/task-logs?page=${currentPage}&size=${pageSize}`)
                .then(response => response.json())
                .then(data => {
                    const tableBody = document.getElementById('logsTable');
                    tableBody.innerHTML = '';
                    document.getElementById('currentPage').textContent = currentPage;
                    
                    data.data.forEach(log => {
                        const row = document.createElement('tr');
                        row.innerHTML = `
                            <td>${log.log_id}</td>
                            <td>${log.task_id}</td>
                            <td>${log.start_time}</td>
                            <td>${log.end_time}</td>
                            <td>${log.file_count}</td>
                            <td>
                                <h3>
                                <span class="badge rounded-pill ${log.status === 1 ? 'bg-warning' : log.status === 2 ? 'bg-success' : log.status === 3 ? 'bg-primary' : 'bg-danger'}">
                                    ${log.status === 1 ? '进行中' : log.status === 2 ? '已完成' : log.status === 3 ? '部分完成' : '失败'}
                                </span>
                                </h3>
                            </td>
                            
                            <td>
                                <button class="btn btn-lg btn-primary" onclick="viewLogDetails(${log.log_id})">
                                    详情
                                </button>
                            </td>
                        `;
                        tableBody.appendChild(row);
                    });
                });
        }
        
        document.getElementById('prevPage').addEventListener('click', (e) => {
            e.preventDefault();
            if (currentPage > 1) {
                currentPage--;
                loadLogs();
            }
        });

        document.getElementById('nextPage').addEventListener('click', (e) => {
            e.preventDefault();
            currentPage++;
            loadLogs();
        });

        function viewLogDetails(logId) {
            window.location.href = `/task-logs/${logId}`;
        }
    </script>
{% endblock %}
